<template>
    <div class="content">
        <div class="index-header-box" id="head">
            <div class="index-header">
                <div @click="$router.back(-1)" class="back">
                    <van-icon name="arrow-left"/>
                </div>
                <div class="title" v-if="info.cat">{{info.cat.cat_name}}</div>
            </div>
        </div>

        <div class="svr-content">
            <div class="con-title">{{info.title}}</div>
            <div class="con-tps" v-if="info.cat && info.cat.cat_key!=3">
                <span>发布者：{{info.author}}</span>
                <span class="ml">{{stampToDate(info.publish_time)}}</span>
            </div>
            <div class="con-number" v-if="info.cat && info.cat.cat_key!=3">浏览次数：{{info.click}}次</div>

            <div class="con-content" v-html="info.content">

            </div>

        </div>

        <div class="page-block" v-if="info.cat && info.cat.cat_key!=3">
            <div class="detail-public-title">
                全部留言
                <span class="num">({{info.msgCount}})</span>
            </div>


            <div class="list-cell no-border van-clearfix">
                <template v-for="items in msgList">
                    <div class="detail-msg-list">
                        <div class="list-head pull-left">
                            <img src="@/assets/images/user/user_g.svg" alt="" class="list-head">
                        </div>

                        <div class="list-right pull-right">
                            <div class="list-header">
                                <span class="pull-left name">{{subMobie(items.first.user.mobile)}}</span>
                                <div class="pull-right good-num" @click="msgGood(items.first.id,items.first)">{{items.first.good_numb}}</div>
                            </div>
                            <div class="list-tps">{{items.first.create_time}}</div>

                            <div v-html="getHH(items.child)"></div>

                            <div class="list-content">{{items.first.content}}</div>
                            <div class="list-hh" @click="showMsg(items.first.id)">回复</div>
                        </div>


                    </div>

                </template>
            </div>

            <infinite-loading :on-infinite="onLoad">
                <div slot="no-results" class="no-more">没有更多了～</div>
                <div slot="no-more" class="no-more">没有更多了～</div>
            </infinite-loading>
        </div>


        <van-popup v-model="msgShow" position="bottom" :style="{ height: '50%' }">
            <div class="msg-title">
                <span v-if="pid>0">回 复 </span>留 言
                <!--<span class="close" @click="msgShow=false">取消</span>-->
                <span class="close" @click="sendMessage">发布</span>
            </div>
            <van-cell-group>
                <van-field v-model="message" rows="8" class="msgContent" autosize type="textarea" maxlength="300"
                           placeholder="请输入留言" show-word-limit/>
            </van-cell-group>

            <!--<van-button type="info" class="msg-btn-primary" @click="sendMessage">发布留言</van-button>-->
        </van-popup>

        <!--<div class="btn-box">-->
        <!--<van-button type="info" class="btn-primary">发布留言</van-button>-->
        <!--</div>-->

        <div class="detail-footer-box" v-if="info.cat && info.cat.cat_key!=3">
            <div class="d-footer">
                <div class="footer-left" style="width: 3rem">
                    <div class="item" @click="artCollect" style="width: 50%">
                        <img src="@/assets/images/icon/sc.svg" alt="" v-if="!collectStatus" class="img">
                        <img src="@/assets/images/icon/sc_par.svg" v-if="collectStatus" alt="" class="img">
                        <div>收藏</div>
                    </div>
                    <div class="item" @click="artGood" style="width: 50%">
                        <img src="@/assets/images/icon/good.svg" alt="" v-if="!goodMsg" class="img">
                        <img src="@/assets/images/icon/good_par.svg" alt="" v-if="goodMsg" class="img">
                        <div>点赞</div>
                    </div>
                </div>
                <a @click="showMsg" style="width: 6.99rem; float: right" class="footer-btn">发布留言</a>
            </div>
        </div>


    </div>
</template>

<script>
    import storeJs from 'storejs'
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        name: "detail",
        components: {
            InfiniteLoading
        },
        data() {
            return {
                id: this.$route.query.id,
                pid: 0,
                info: [],
                msgShow: false,
                message: "",

                msgList: [],

                goodMsg: false,
                collectStatus: false,

                page:1,
                checkLogin:false,
            }
        },
        computed: {},
        mounted: function () {
            window.toast=this.$toast;
            window.api=this.$api.msg.artMsgGood;
            window.goodNum=function (id) {
                api({id:id}).then(res=>{
                    var res=res.data;

                    if(res.status){
                        document.getElementById("g"+id).innerHTML=res.data;
                    }else{
                        toast(res.msg);
                    }
                });
            };

            let that=this;
            this.$api.login.checkLogin(function (e) {
                that.checkLogin=true;
            },false);

            this.init();
        },
        methods: {
            init() {
                this.$api.msg.detail(this.id).then(res => {
                    var res = res.data;
                    this.info = res.data;

                    if(this.info.collectStatus>0){
                        this.collectStatus=true;
                    }

                    if(this.info.goodStatus>0){
                        this.goodMsg=true;
                    }

                });
            },

            //留言列表
            onLoad($state) {
                var that=this;

                this.$api.msg.getMsg(that.id,that.page,{}).then(res=>{
                    res=res.data;

                    if (res.data.data.length) {
                        that.msgList.push(...res.data.data);
                        that.page++;

                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                });
            },

            //留言
            sendMessage() {
                if (storeJs('userArticleMsg_' + this.id)) {
                    let curTime = new Date().getTime() / 1000;
                    let endTime = storeJs('userArticleMsg_' + this.id);
                    if (curTime <= endTime) {
                        this.$toast('频繁操作，请稍后再试！');
                        return false;
                    }
                }

                if (this.message == "") {
                    this.$toast('请填写留言内容！');
                    return false;
                }

                this.$api.msg.sendArticleMsg({id: this.id, content: this.message,pid:this.pid}).then(res => {
                    var res = res.data;

                    if (res.status) {
                        this.$toast("留言成功，请等待审核！");
                        this.msgShow = false;
                        this.message = "";

                        let date = new Date();
                        let min = date.getMinutes();
                        date.setMinutes(min + 1);
                        storeJs('userArticleMsg_' + this.id, `${Date.parse(date) / 1000}`);
                    } else {
                        this.$toast(res.msg);
                    }
                });
            },

            //文章收藏
            artCollect() {
                let id=this.info.article_id;
                let that=this;
                if(!that.checkLogin){
                    this.$api.login.checkLogin();
                    return true;
                }

                that.$api.msg.articleCollect({id:id}).then(res=>{
                    var res=res.data;

                    if(res.status){
                        that.$toast(that.collectStatus?"取消成功！":"收藏成功！");
                        that.collectStatus=that.collectStatus?false:true;
                    }else{
                        that.$toast(res.msg);
                    }
                });
            },

            //文章点赞
            artGood() {

                let that=this;
                let id=that.info.article_id;

                if(!that.checkLogin){
                    this.$api.login.checkLogin();
                    return true;
                }

                that.$api.msg.artGood({id:id}).then(res=>{
                    var res=res.data;

                    if(res.status){
                        that.goodMsg=that.goodMsg?false:true;
                    }else{
                        that.$toast(res.msg);
                    }
                });

            },

            //留言
            getHH(list){
                if(list.length>0){
                    var str='<div class="list-floor">';
                    list.find((item,index)=>{
                        if(index>0) str+='<div class="list-floor">';
                    });

                    list.find((item,index)=>{
                        if(index>0) str+='</div>';
                        str+='<div class="floor-list">';
                        str+='<div class="floor-list-header">'+this.subMobie(item.user.mobile)+'</div>';
                        str+='<div class="floor-list-tps">';
                        str+=(index+1)+'楼 '+item.create_time;
                        str+='<div class="pull-right floor-good-num" onclick="goodNum('+item.id+')" id="g'+item.id+'">'+item.good_numb+'</div>';
                        str+='</div>';
                        str+='<div class="floor-list-content">'+item.content+'</div>';
                        str+='</div>';
                    });
                    str+='</div>';
                }

                return str;

            },

            //留言点赞
            msgGood(id,item){
                if(!this.checkLogin){
                    this.$api.login.checkLogin();
                    return true;
                }

                if(storeJs('artMsg'+id)){
                    this.$toast('重复点赞无效！');
                    return false;
                }else{
                    this.$api.msg.artMsgGood({id:id}).then(res=>{
                        var res=res.data;

                        if(res.status){
                            storeJs('artMsg'+id,"1");
                            item.good_numb=res.data;
                        }else{
                            this.$toast(res.msg);
                        }
                    });
                }
            },

            showMsg(pid=0){
                if(!this.checkLogin){
                    this.$api.login.checkLogin();
                    return true;
                }

                this.msgShow=true;
                this.pid=pid;
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/index.scss";
</style>
